<div id="div2_chart"></div>
<script>
    var kategori = [];
    var series = [];
    var kat = [];
    var ser = [];

    var budha = 0, hindu = 0,
            islam = 0,
            katholik = 0,
            kristen = 0,
            lainnya = 0,
            tidak_diisi = 0;
    var json = JSON.parse('<?= $json ?>');
    var kec = '<?= $nama_kecamatan ?>';
    kec = kec.toLowerCase().trim();
    for (var i = 0; i < json.rows.length; i++) {
        var row = json.rows[i];
        if (kec.length > 0) {
            if (row.nama.toLowerCase().indexOf(kec) >= 0) {
                budha += row.budha;
                hindu += row.hindu;
                islam += row.islam;
                katholik += row.katholik;
                kristen += row.kristen;
                lainnya += row.lainnya;
                tidak_diisi += row.tidak_diisi;
            }
        } else {
            budha += row.budha;
            hindu += row.hindu;
            islam += row.islam;
            katholik += row.katholik;
            kristen += row.kristen;
            lainnya += row.lainnya;
            tidak_diisi += row.tidak_diisi;
        }
    }
    ser.push(['islam', islam]);
    ser.push(['kristen', kristen]);
    ser.push(['katholik', katholik]);
    ser.push(['hindu', hindu]);
    ser.push(['budha', budha]);
    ser.push(['lainnya', lainnya]);
    ser.push(['tidak_diisi', tidak_diisi]);

    $('#div2_chart').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: 0, //null,
            plotShadow: false
        },
        title: {
            text: 'Jumlah Peserta Didik Berdasarkan Agama'
        },
        subtitle: {
            text: '<?php
if (isset($subtitle))
    echo implode('-', $subtitle);
else
    echo 'Banyuwangi';
?>'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.y}</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                }
            }
        },
        series: [{
                type: 'pie',
                name: 'Jumlah',
                data: ser
            }]
    });

</script>
<div style="margin-top: 40px">
    <table class="table table-striped">
        <tr>
            <th>No</th>
            <th>Agama</th>
            <th style="text-align: right">Jumlah</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Islam</td>
            <td style="text-align: right" id="jumlah_islam"></td>
        </tr>
        <tr>
            <td>2</td>
            <td>Kristen</td>
            <td style="text-align: right" id="jumlah_kristen"></td>
        </tr>
        <tr>
            <td>3</td>
            <td>Katholik</td>
            <td style="text-align: right" id="jumlah_katholik"></td>
        </tr>
        <tr>
            <td>4</td>
            <td>Hindu</td>
            <td style="text-align: right" id="jumlah_hindu"></td>
        </tr>
        <tr>
            <td>5</td>
            <td>Budha</td>
            <td style="text-align: right" id="jumlah_budha"></td>
        </tr>
        <tr>
            <td>6</td>
            <td>Lainnya</td>
            <td style="text-align: right" id="jumlah_lainnya"></td>
        </tr>
        <tr>
            <td>7</td>
            <td>Tidak Diisi</td>
            <td style="text-align: right" id="jumlah_tidak_diisi"></td>
        </tr>
        <tr>
            <td></td>
            <td>Total</td>
            <td style="text-align: right" id="jumlah_total"></td>
        </tr>
    </table>
</div>
<script>
    document.getElementById('jumlah_islam').innerHTML=islam+'';
    document.getElementById('jumlah_kristen').innerHTML=kristen+'';
    document.getElementById('jumlah_katholik').innerHTML=katholik+'';
    document.getElementById('jumlah_hindu').innerHTML=hindu+'';
    document.getElementById('jumlah_budha').innerHTML=budha+'';
    document.getElementById('jumlah_lainnya').innerHTML=lainnya+'';
    document.getElementById('jumlah_tidak_diisi').innerHTML=tidak_diisi+'';
    document.getElementById('jumlah_tidak_diisi').innerHTML=tidak_diisi+islam+kristen+katholik+hindu+budha+lainnya;
    </script>